<template>
  <div class="video-list" v-infinite-scroll="scrollLoad" :infinite-scroll-distance="50"
    :infinite-scroll-immediate="false">
    <template v-for="item in list" :key="item.cameraUuid">
      <div class="video-item" @click="handleClick(item)">
        <div class="video-item-name">
          <span>{{item.cameraName}}</span>
          <el-tag v-if="item.onlineStatus === '1'" plain round>在&nbsp;&nbsp;线</el-tag>
          <el-tag v-else plain round type="danger">离&nbsp;&nbsp;线</el-tag>
        </div>
        <div class="video-item-img">
          <el-image loading="lazy" class="video-item-img-item"
            :src="`${BASE_API}video/getPlaySnap?cameraUuid=${item.cameraUuid}&customerNo=${item.customerNo}&cameraType=${item.cameraType}`">
            <template #error>
              <el-icon size="32">
                <VideoPlay />
              </el-icon>
            </template>
          </el-image>
        </div>
        <el-button-group class="video-item-tools">
          <el-button @click.stop="viewRecord(item)">查看录像</el-button>
          <el-button>AI分析</el-button>
        </el-button-group>
      </div>
    </template>
    <div v-if="status" class="status">
      {{status}}
    </div>
  </div>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { useInfiniteScroll } from '@/hooks/useInfiniteScroll'
import { useDialog } from '@/hooks/useDialog'
import VideoDetails from './videoDetails.vue'
import { VideoPlay } from '@element-plus/icons-vue'
// 定义组件名称
defineOptions({
  name: 'VideoList'
})

const BASE_API = import.meta.env.VITE_APP_BASE_URL

// 定义视频项接口
interface VideoItem {
  cameraUuid: string
  cameraName: string
  onlineStatus: string
  customerNo: string
  cameraType: string
}

defineProps<{
  list: VideoItem[]
  status: string
}>()

const { openDialog } = useDialog()

/**
 * 处理视频项点击事件
 * @param item - 被点击的视频项
 */
function handleClick(item: VideoItem) {
  if (item.onlineStatus === '0') {
    ElMessage({
      message: '该摄像头离线，无法查看视频',
      type: 'warning'
    })
    return
  }
  openDialog(item.cameraName, VideoDetails, item)
}

function viewRecord(item: VideoItem) {
  if (item.onlineStatus === '0') {
    ElMessage({
      message: '该摄像头离线，无法查看视频',
      type: 'warning'
    })
    return
  }
  openDialog(item.cameraName, VideoDetails, {
    ...item,
    isRecord: true
  })
}

const emit = defineEmits(['scrollLoad'])

const { scrollLoad } = useInfiniteScroll(() => {
  emit('scrollLoad')
})
</script>
<style scoped lang="scss">
.video-list{
    flex: 1;
    overflow-y: auto;
    padding-left: 16px;
    direction: rtl;
    .video-item{
      display: flex;
      flex-direction: column;
      margin-bottom: 8px;
      background: var(--bg-color-page);
      padding: 8px;
      gap: 8px;
      cursor: pointer;
      direction: ltr;
      &:last-child {
        margin-bottom: 0;
      }
      .video-item-name{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        font-size: 14px;
      }
      .video-item-img{
        width: 100%;
        font-size: 0;
        .video-item-img-item{
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 135px;
          background-color: #000;
          object-fit: cover;
        }
      }
      .video-item-tools{
        .el-button{
          background-color: rgba(0, 255, 167, 0.68);
          color: var(--text-color);
        }
      }
    }

    .status{
      text-align: center;
      padding: 8px 0;
      direction: ltr;
    }
  }
</style>

